<template>
	<view>
		<view class="c-navbar-top fx-center" :class="{'c-navbar-border':showBorder}" :style="getpaddingTop">
			<template v-if="navEvent">
				<slot name="nav"></slot>
			</template>
			<template v-else>
				<view class="title" :style="getTitleColor" v-if="title">{{title}}</view>
				<view class="title" v-else>
					<slot name="title"></slot>
				</view>
			</template>

		</view>
		<view :style="getSafeBox" v-if="showSafebox"></view>
	</view>
</template>

<script>
	const statusHeight = uni.getSystemInfoSync().statusBarHeight
	const menuTop = uni.getMenuButtonBoundingClientRect().top
	const menuHeight = uni.getMenuButtonBoundingClientRect().height
	export default {
		name: "c-navbar",
		props: {
			// 标题
			title: {
				typeof: String,
				default: ''
			},
			// 字体颜色
			color: {
				typeof: String,
				default: '#1A1311'
			},
			// 背景色
			backGround: {
				typeof: String,
				default: '#fff'
			},
			// 是否自定义顶部导航栏
			navEvent: {
				typeof: Boolean,
				default: () => false
			},
			// 是否自定义返回事件
			backEvent: {
				typeof: Boolean,
				default: () => false
			},
			// 显示安全区域
			showSafebox: {
				typeof: Boolean,
				default: () => true
			},
			// 是否显示返回按钮
			showLeft: {
				typeof: Boolean,
				default: () => true
			},
			// 是否显示导航栏底部边框
			showBorder: {
				typeof: Boolean,
				default: () => false
			},
			// 左右边距
			paddingLR: {
				typeof: String,
				default: '24rpx'
			},
		},
		computed: {
			getpaddingTop() {
				return `padding-top: ${menuTop}px;background-color:${this.backGround};height:${menuHeight}px;padding-left:${this.paddingLR};padding-right:${this.paddingLR}`
			},
			getTitleColor() {
				return 'color:' + this.color
			},
			getIconColor() {
				return `border-left: 4rpx solid ${this.color};border-bottom: 4rpx solid ${this.color};`
			},
			getSafeBox() {
				return 'height:' + (menuTop + menuHeight + 6) + 'px'
			}
		},
		data() {
			return {
				statusHeight
			};
		},
		methods: {
			goBack() {
				if (this.backEvent) {
					this.$emit('backClick')
				} else {
					let length = getCurrentPages().length
					if (length > 1) {
						uni.navigateBack()
					} else {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}

				}
			}
		}
	}
</script>

<style lang="scss">
	/* 自定义导航栏 */
	.c-navbar-border {
		border-bottom: 1px solid #E2E2E2;
	}

	.c-navbar-top {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		// height: 44px;
		// height: var(--status-bar-height);
		// background-color: #fff;
		z-index: 100;
		padding: 0 24rpx 6px;
		box-sizing: content-box;


		.arrow-left {
			width: 24rpx;
			height: 24rpx;
			transform: rotate(45deg);
			border-left: 4rpx solid #000;
			border-bottom: 4rpx solid #000;
			z-index: 200;
			position: relative;
		}

		.arrow-left-safe {
			width: 100rpx;
			height: 100rpx;
			position: absolute;
			margin-top: -50rpx;
			margin-left: -50rpx;
		}



		.title {
			font-size: 30rpx;
			width: 100%;
			text-align: center;
		}
	}
</style>